<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<script>
test(function(t) {
  var SHADOW_OFFSET = 15;

  var image = new Image();
  image.src = "resources/html5.png";
  image.onload = function() {
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.setAttribute('width', '1000');
    canvas.setAttribute('height', '1000');
    var ctx = canvas.getContext('2d');

    var pattern = ctx.createPattern(image, 'repeat');
    ctx.beginPath();
    ctx.fillStyle = pattern;
    ctx.shadowColor = 'rgba(0,0,0,0.5)';
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = SHADOW_OFFSET;
    ctx.shadowOffsetY = SHADOW_OFFSET;

    // colored pixels of html5.png starts at 3 pixels away from the border of
    // the image, they must be taken into account since the shadow is applied
    // to the colored pixels.
    const squareBorder = image.width + SHADOW_OFFSET + 3 * 2;
    var imgDataBefore = [];
    imgDataBefore.push(ctx.getImageData(25, squareBorder, 1, 1).data)
    for (var i = 25; i < squareBorder; i += 10)
      imgDataBefore.push(ctx.getImageData(squareBorder, i, 1, 1).data)

    ctx.fillRect(0, 0, image.width, image.height);

    var imgDataAfter = [];
    imgDataAfter.push(ctx.getImageData(25, squareBorder, 1, 1).data)
    for (var i = 25; i < squareBorder; i += 10)
      imgDataAfter.push(ctx.getImageData(squareBorder, i, 1, 1).data)

    for (var i = 0; i < imgDataAfter.length; i++)
      assert_array_equals(imgDataAfter[i], imgDataBefore[i]);
  };
}, 'Test that the drop shadow properly falls off when fillRect is drawn with a pattern.');

</script>
